<template>
  <div class="title-center-wrap">
    <div class="mh-left">
      <!-- pending -->
      <!-- <dv-decoration-8 style="width:300px;height:50px;" /> -->
    </div>
    <div class="mh-middle">
      <router-link :to="{ name: 'index' }">
        <h3 class="mh-middle-title">{{ title }}</h3>
      </router-link>
    </div>
    <div class="mh-right">
      <!-- pending -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    }
  }
};
</script>

<style lang="scss">
.title-center-wrap {
  background: url("../../../assets/img/titleCenter/titlecenter.png") no-repeat;
  //   background-size: 100% 100%;
  background-position: top center;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .mh-left {
    font-size: 20px;
    color: rgb(1, 134, 187);

    a:visited {
      color: rgb(1, 134, 187);
    }
  }
  .mh-middle {
    // font-family: '微软雅黑';
    font-size: 30px;
    a {
      text-decoration: none;
    }
    .mh-middle-title {
      cursor: pointer;
      letter-spacing: 2px;
      text-align: center;
      background-image: -webkit-linear-gradient(top, #ffffff, #5fb2ff);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .mh-left,
  .mh-right {
    width: 450px;
  }
}
</style>
